import { useTranslation } from 'react-i18next'
import { Modal, Progress } from 'antd'
import styled from 'styled-components'
import { PrizeInfo, PrizeStatus, RewardType, reward } from '../../../service'
import styles from './styles.module.css';
import Icon from '../../../component/Icon';
import { useCallback, useMemo } from 'react';
import Telegram from '../../../utils/telegram';
import Message from '../../../component/Message';

const Container = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 1.75rem;
    box-sizing: border-box;
    position: relative;
`

const Content = styled.div`
    padding: 1.25rem 1.4375rem 1.875rem;
    box-sizing: border-box;
    background: #0D1524;
    border-radius: .625rem;
    border: 1px solid;
    overflow: hidden;
    &:before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        background: linear-gradient(135deg, rgba(0, 179, 232, 1), rgba(0, 228, 175, 1));
        border-radius: inherit; /* 继承父元素的圆角 */
        z-index: -1;
        padding: 2px; /* 边框宽度 */
        -webkit-mask: linear-gradient(rgba(0, 179, 232, 1) 0 100%) content-box, linear-gradient(rgba(0, 228, 175, 1) 0 100%);
        mask: linear-gradient(rgba(0, 179, 232, 1) 0 100%) content-box, linear-gradient(rgba(0, 228, 175, 1) 0 100%);
        mask-composite: xor;
        -webkit-mask-composite: xor;
    }
`

const Title = styled.div`
    font-size: 1.125rem;
    font-weight: bold;
    color: white;
    box-sizing: border-box;
    padding: .5rem 1.3125rem;
    text-align: center;
`
const Pool = styled.div`
    margin-top: 1.5rem;
    padding: .5rem 0;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    background: #141D2D;
    box-shadow: 0px 2 0px 0px rgba(0,0,0,0.02);
    border-radius: 15px 15px 15px 15px;
    border: 1px solid #2F3A42;
`
const PoolTotal = styled.div`
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    background-image: linear-gradient(59.64633244545955deg, #00AFEA 0%, #00ECA5 100%);
	color: transparent;
    background-clip: text;
	-webkit-background-clip: text;
    text-shadow: 0px 0px 30px #00D3C2;
`
const PoolTips = styled.div`
    text-shadow: 0px 0px 30px #00D3C2;
    color: white;
    font-size: .6875rem;
`

const ProgressBox = styled.div`
    margin-top: .75rem;
    padding: .75rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid #13313D;
`

const ProgressTitle = styled.div`
    font-size: .6875rem;
    color: white;
`

const ProgressContent = styled.div`
    margin-top: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
`

const ProgressCount = styled.div`
    font-size: .75rem;
    color: white;
    margin: 0 .1875rem;
`

const ProgressCheck = styled(Icon)`
    margin: .1875rem;
`

const Reward = styled.div`
    padding: .75rem 0;
    box-sizing: border-box;
`
const RewardTitle = styled.div`
    color: white;
    font-size: .6875rem;
    text-align: start;
`

const RewardContent = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
`
const List = styled.div`
    padding: .25rem;
    box-sizing: border-box;
`
const Item = styled.div`
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    .text {
        margin-left: .125rem;
        font-size: .875rem;
        font-weight: 600;
        color: white;
        text-align: start;
    }
`
const RewardGet = styled.div`
    background: #1445FD;
    border-radius: .25rem;
    width: 3.125rem;
    height: 1.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    pointer-events: auto;
`

const Invite = styled.div`
    border-radius: 10px;
    background: #00C3C2;
    height: 2.5rem;
    width: calc(100% - .875rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    pointer-events: auto;
`

const Close = styled(Icon)`
    position: absolute;
    padding: .5625rem;
    top: .1875rem;
    right: 0;
    pointer-events: auto; // fix ant design Modal modalRender not response click event
`

interface Props {
    data: PrizeInfo
    show?: boolean
    onClose?: () => void
    onGet?: () => void
}


const Detail: React.FC<Props> = ({ data, show, onClose, onGet }) => {
    const { t } = useTranslation()
    const isFinished = useMemo(() => data.value === data.max && !Number(data.max || 0), [data])
    const coins = useMemo(() => {
        return [
            { icon: 'ton_coin', count: data?.rewardTon || 0 },
            { icon: 'icon_coin', count: data?.rewardEarth || 0 }
        ]
    }, [data])

    const onGetRewardClick = useCallback(async () => {
        if (data.status !== PrizeStatus.Wait) {
            return
        }
        const res = await reward({ type: RewardType.PoolReward })
        if (!res.success) {
            Message.error(res.message)
            return
        }
        Message.success(t('common.success'))
        onGet?.()
    }, [onGet, data, t])

    return <Modal
        wrapClassName={styles.success_modal}
        open={show}
        maskClosable={true}
        modalRender={() => <Container>
            <Content>
                <Close
                    name='prize_close'
                    width='1rem'
                    onClick={onClose}
                />
                <Title>{t('home.prize.detail.title')}</Title>
                <Pool>
                    <PoolTotal >{`${data.poolTon || 0}${t('common.tonCoin')}+${data.poolEarth || 0}${t('common.earthCoin')}`}</PoolTotal>
                    <PoolTips>{t('home.prize.detail.tips')}</PoolTips>
                </Pool>
                <ProgressBox>
                    <ProgressTitle>{t('home.prize.detail.invitation')}</ProgressTitle>
                    <ProgressContent>
                        <Icon
                            name='prize_avatar'
                            width='1.5rem'
                            height='1.5rem'
                        />
                        <ProgressCount>{`${data.value || 0}/${data.max || 0}`}</ProgressCount>
                        <Progress
                            rootClassName='progress'
                            showInfo={false}
                            strokeColor="#01BFBF"
                            trailColor="#32465E"
                            size={['100%', 4]}
                            percent={Number(data.value || 0) / Number(data.max || 1) * 100}
                        />
                        <ProgressCheck
                            name={isFinished ? 'prize_check' : ''}
                            width='0.75rem'
                            height='0.75rem'
                        />
                    </ProgressContent>
                </ProgressBox>
                <Reward>
                    <RewardTitle>{t('home.prize.detail.gotten')}</RewardTitle>
                    <RewardContent>
                        <List>
                            {coins.map((item) => <Item
                                key={item.icon}
                            >
                                <Icon
                                    name={item.icon}
                                    width='0.75rem'
                                    height='0.75rem'
                                />
                                <div className='text'>{item.count}</div>
                            </Item>)}
                        </List>
                        {data.status !== PrizeStatus.None && <RewardGet onClick={onGetRewardClick}>
                            {data.status === PrizeStatus.Wait ? t('home.prize.detail.get') : <Icon
                                name="task_success"
                                width='1rem'
                                height='1rem'
                            />}
                        </RewardGet>}
                    </RewardContent>
                </Reward>
                <Invite onClick={() => Telegram.invite(data.inviteUrl)}>{t('home.prize.detail.invite')}</Invite>
            </Content>
        </Container >}
    ></Modal >
}

export default Detail